<template>
  <div class="Hot-commodity">
    <div class="date-select">
      <el-text tag="b" size="large">热销商品排名</el-text>
    </div>
    <div class="Hot-commodity-list" v-for="(item, index) in data" :key="index">
      <img :src="item.goods_image" alt="" />
      <el-text tag="b" class="commodity-name">{{ item.goods_name }}</el-text>
      <el-text>{{ item.quantity }}件</el-text>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { hotSellingProductsRes } from "@/types/index";
interface Props {
  data: hotSellingProductsRes[];
}
defineProps<Props>();
</script>

<style scoped>
.Hot-commodity {
  grid-column: span 1;
  overflow-y: auto;
}
.Hot-commodity::-webkit-scrollbar {
  width: 5px; /* 设置滚动条的宽度 */
}

.Hot-commodity::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置滚动条的背景色 */
}

.Hot-commodity::-webkit-scrollbar-thumb {
  background-color: #b064fb; /* 设置滚动条的前景色 */
}
.date-select {
  display: flex;
  align-items: center;
  height: 32px;
}

.date-select >>> .el-range-editor.el-input__wrapper {
  width: min-content !important;
}
.Hot-commodity-list {
  display: flex;
  align-items: center;
  padding: 10px 5px 10px 0;
}
.Hot-commodity-list img {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  object-fit: cover;
}
.commodity-name {
  flex: 1;
  padding: 0 10px;
}
</style>
